<template>
    <div>
        <el-form-item label="显示形式">
            <el-radio-group v-model="data.options.xAxis.type" @change="changeRadio">
                <el-radio label="category">横向显示</el-radio>
                <el-radio label="value">纵向显示</el-radio>
            </el-radio-group>
        </el-form-item>
        <common-echart :data="data" type="bar" :form-list="formList"></common-echart>
        <el-form-item label="柱图颜色">
            <el-color-picker v-model="data.options.series[0].itemStyle.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="柱条宽度">
            <el-input v-model="data.options.series[0].barWidth" placeholder="默认自适应"></el-input>
        </el-form-item>
    </div>
</template>
<script>
import CommonEchart from './CommonEchart'
import {getEchartByType} from '@/api/api'
export default {
    name: 'SetBarEchart',
    components: {
        CommonEchart
    },
    props: {
        data: {
            type: Object
        },
        selectDict: {
            type: Array
        },
        formList: {
           type: Array 
        }
    },
    data(){
        return {
            xData: this.data.options.xAxis.data,
            yData: this.data.options.yAxis.data
        }
    },
    methods: {
        changeRadio(val) {
            if(val=='value'){
               this.data.options.xAxis.type = 'value'
               this.data.options.yAxis.type = 'category'
               this.data.options.xAxis.axisLine.show = false
               this.data.options.xAxis.axisTick.show = false
               this.data.options.xAxis.axisLabel.show = false
               this.data.options.xAxis.data = this.yData
               this.data.options.yAxis.data = this.xData
               this.data.options.xAxis.splitLine.show = false

               this.data.options.yAxis.axisLine.show = true
               this.data.options.yAxis.splitLine.show = false
               this.data.options.yAxis.axisTick.show = false
               this.data.options.yAxis.axisLabel={
                    show: true,
                    color: "#333",
                    fontSize: 16
                }
                this.data.options.series[0].label.position = 'right'
                this.data.options.series[0].itemStyle.barBorderRadius = [0,5,5,0]
            } else {
                this.data.options.xAxis.type = 'category'
                this.data.options.yAxis.type = 'value'
                this.data.options.xAxis.axisLine.show = true
                this.data.options.xAxis.axisTick.show = true
                this.data.options.xAxis.axisLabel.show = true
                this.data.options.xAxis.data = this.xData
                this.data.options.yAxis.data = this.yData
                this.data.options.xAxis.splitLine.show = false

                this.data.options.yAxis.axisLine.show = true
                this.data.options.yAxis.splitLine.show = true
                this.data.options.yAxis.axisTick.show = true
                this.data.options.xAxis.axisLabel={
                    show: true,
                    color: "#333",
                    fontSize: 16
                }
                this.data.options.series[0].label.position = 'top'
                this.data.options.series[0].itemStyle.barBorderRadius = [5,5,0,0]
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .colors{
        display: block;
        li{
            display: inline-block;
            width: 30px;
            height: 20px;
            margin-left: 5px;
        }
    }
</style>
